<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>科讯Music-登录</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<style>
.loginpanl {
	height: 320px;
	width: 400px;
	/*background-color: #1B6D85;*/
	position: fixed;
	top: 100px;
	left: 35%;
}

.input-group {
	width: 80%;
	margin: auto;
}
</style>
</head>

<body>
	

	<!--登录面板-->
	<div class="loginpanl ">
		<div class="panel panel-default"
			style="height: 100%; margin-top: 100px;">
			<div class="panel-heading"
				style="background-color: #31C27C; color: whitesmoke; text-align: center;">用户注册</div>
			<div class="panel-body">
				<br />
				<div class="input-group">
					<span class="input-group-addon">用户名</span> <input type="text"
						class="form-control" id="userName" placeholder="账号"
						aria-describedby="basic-addon1">
				</div>
				<div style="color: red; font-size: 12px; visibility: hidden;"
					class="input-group" id="userNameerror">
					<span class="glyphicon glyphicon-remove" style="height: 100%;"></span>
					<span style="height: 100%;">erroe</span>
				</div>

				<div class="input-group">
					<span class="input-group-addon" id="basic-addon1">密码</span> <input
						type="password" class="form-control" id="password" placeholder="密码"
						aria-describedby="basic-addon1">
				</div>
				<div style="color: red; font-size: 12px; visibility: hidden;"
					class="input-group" id="passworderror">
					<span class="glyphicon glyphicon-remove" style="height: 100%;"></span>
					<span style="height: 100%;">erroe</span>
				</div>
				<div class="input-group">
					<span class="input-group-addon" id="basic-addon1">重复密码</span> <input
						type="password" class="form-control" id="password1"
						placeholder="再次输入您的密码" aria-describedby="basic-addon1">
				</div>
				<div style="color: red; font-size: 12px; visibility: hidden;"
					class="input-group" id="password1error">
					<span class="glyphicon glyphicon-remove" style="height: 100%;"></span>
					<span style="height: 100%;">erroe</span>
				</div>
				<div style="width: 80%; margin: auto;" class="container">
					<div class="col-lg-12">
						<button class="btn btn-primary btn-block" onclick="reg()">注册</button>
					</div>
					<div style="height: 30px; line-height: 30px;"
						class="col-lg-12 text-right">
						<a href="login.html">已有账号,去登录</a>
					</div>

				</div>
			</div>
		</div>
	</div>

</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/config.js" ></script>
<script>
	$("#userName").blur(function() {
		var userName = $("#userName").val()
		if (userName.trim().length <= 0) {
			$("#userNameerror").css("visibility", "visible");
			$("#userNameerror span:eq(1)").text("用户名不能为空");
			return;
		} else {
			$.get(serverLocation+"/kexunMusic/regBefo", {
				"uName" : userName
			}, function(data) {
				if (data.message == "have") {
					$("#userNameerror").css("visibility", "visible");
					$("#userNameerror span:eq(1)").text("用户名已经存在换一个试试");
				} else {

					$("#userNameerror").css("visibility", "hidden");
					$("#userNameerror span:eq(1)").text("");
				}

			});

		}

	})
	$("#password").blur(function() {
		var password = $("#password").val()
		if (password.trim().length <= 0) {
			$("#passworderror").css("visibility", "visible");
			$("#passworderror span:eq(1)").text("密码不能为空");
			return;
		} else {
			$("#passworderror").css("visibility", "hidden");
			$("#passworderror span:eq(1)").text("");

		}

	})
	$("#password1").blur(function() {
		var password = $("#password").val()
		var password1 = $("#password1").val();
		if (password1.trim().length <= 0) {
			$("#password1error").css("visibility", "visible");
			$("#password1error span:eq(1)").text("重复密码不能为空");
			return;
		} else {
			$("#passworderror").css("visibility", "hidden");
			$("#passworderror span:eq(1)").text("");

		}

		if (password != password1) {
			$("#password1error").css("visibility", "visible");
			$("#password1error span:eq(1)").text("两次密码不一致");
			return;
		} else {
			$("#password1error").css("visibility", "hidden");
			$("#password1error span:eq(1)").text("");

		}

	})

	function reg() {

		var userName = $("#userName").val()
		var password = $("#password").val()
		var password1 = $("#password1").val();
		//表单验证
		if (userName.trim().length <= 0) {
			$("#userNameerror").css("visibility", "visible");
			$("#userNameerror span:eq(1)").text("用户名不能为空");
			return;
		} else {
			$.get(serverLocation+"/kexunMusic/regBefo", {
				"uName" : userName
			}, function(data) {
				if (data.message == "have") {
					$("#userNameerror").css("visibility", "visible");
					$("#userNameerror span:eq(1)").text("用户名已经存在换一个试试");
					return;
				} else {

					$("#userNameerror").css("visibility", "hidden");
					$("#userNameerror span:eq(1)").text("");
				}

			});

		}

		if (password.trim().length <= 0) {
			$("#passworderror").css("visibility", "visible");
			$("#passworderror span:eq(1)").text("重复密码不能为空");
			return;
		} else {
			$("#passworderror").css("visibility", "hidden");
			$("#passworderror span:eq(1)").text("");

		}

		if (password1.trim().length <= 0) {
			$("#password1error").css("visibility", "visible");
			$("#password1error span:eq(1)").text("重复密码不能为空");
			return;
		} else {
			$("#password1error").css("visibility", "hidden");
			$("#password1error span:eq(1)").text("");

		}

		if (password != password1) {
			$("#password1error").css("visibility", "visible");
			$("#password1error span:eq(1)").text("两次密码不一致");
			return;
		} else {
			$("#password1error").css("visibility", "hidden");
			$("#password1error span:eq(1)").text("");

		}
		//提交数据

		$.post(serverLocation+"/kexunMusic/userReg", {
			"uName" : userName,
			"uPassword" : password
		}, function(data) {

			if (data.message == "ok") {
				var userInfo=JSON.stringify(data.userInfo)
				window.localStorage.setItem("userInfo",userInfo);
				window.location.href="index.html";
				//index界面获取
				
				
			} else if (data.message == "have") {
				alert("用户已经存在");
			} else {
				alert("系统错误");
			}

		});

	}
</script>

</html>